<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../js/cao_xiao_xu/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../../js/cao_xiao_xu/jquery-1.11.3.js"></script>
  <script src="../../js/cao_xiao_xu/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/cao_xiao_xu/State.css">
  <script src="../../js/cao_xiao_xu/State.js"></script>
</head>

<body>
  <div class="State">
    <div class="head">
      <span>国家管理</span>
    </div>
    <div class="middle">
      <div class="middletop">
        <span>搜索国家</span>
        <input type="text" placeholder="请输入国家名称" id="chaxun">
        <button id="reset">重置</button>
      </div>
      <div class="tj" id="add" data-toggle="modal" data-target="#mydiv" data-whatever="@mdo">添加国家</div>
      <table class="table table-bordered">
        <thead>
          <tr id="gl">
            <th>国家名称</th>
            <th>商品数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="mytable"></tbody>
      </table>
      <div class="dibu">
        <button id="pre">上一页</button>
        <div class="yema" id="yema"></div>
        <button id="next">下一页</button>
      </div>
    </div>
  </div>





  <!-- 添加 -->
  <div class="modal fade" id="mydiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">添加国家</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">国家名称</label>
              <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">商品数量</label>
              <input type="text" class="form-control" id="numb">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" id="addStu" class="btn btn-primary">确认添加</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除 -->
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="deleteModalLabel">确认框</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label class="control-label">确定要删除这个国家吗？</label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
          <button type="button" class="btn btn-primary" id="sbt">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 修改 -->
  <div class="modal fade" id="mydiv1" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">修改学生</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">国家名称</label>
              <input type="text" class="form-control" id="name1">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">商品数量</label>
              <input type="text" class="form-control" id="numb1">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" id="addStu1" class="btn btn-primary">确定修改</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>